<template>
    <div>
        <div class="container">
            <el-main>
                <el-form ref="memberSubjectReBackFormRef" :rules="memberSubjectReBackFormRules" :model="memberSubjectReBackForm" :label-width="formLabelWidth">
                    <el-form-item label="ID" prop="id" v-if="false">
                        <el-input v-model="memberSubjectReBackForm.id" c/>
                    </el-form-item>
					<!-- 常规信息 -->
					<el-form-item label="话题标题">
                        <template #default="scope">
                            <!-- {{memberSubjectReBackForm}} -->
                            {{memberSubjectReBackForm.contentTitle}}
                        </template>
                    </el-form-item>
					<el-form-item label="留言内容" prop="content">
						<el-input type="textarea" rows="5" v-model="memberSubjectReBackForm.content" clearable class="handle-input mr10" maxlength="200" show-word-limit/>
                    </el-form-item>
                    <el-form-item label="发布会员" prop="memberId">
                        <el-input v-model="memberSubjectReBackForm.memberId" class="handle-input mr10" v-if="false"/>
                        <el-select v-model="memberSubjectReBackForm.memberId" class="handle-select mr10" placeholder="请选择">
                            <el-option v-for="item in memberIdOpt" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关注会员" prop="pointMemberId">
                        <el-input v-model="memberSubjectReBackForm.pointMemberId" class="handle-input mr10" v-if="false"/>
                        <el-select v-model="memberSubjectReBackForm.pointMemberId" class="handle-select mr10" placeholder="请选择">
                            <el-option v-for="item in memberIdOpt" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-main>
			<el-footer>
				<el-button type="primary" @click="func_onSubmit" plain>保存数据</el-button>
				<el-button type="success" @click="func_onReset" plain>重置表单</el-button>
				<el-button @click="func_closeDialog" plain>取 消</el-button>
			</el-footer>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findMemberSubjectInfoById, reBackMemberSubject} from '../../../../api/hairmanager/memberSubject';
import { findMemberList, } from "../../../../api/hairmanager/member";

import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../../api/CommonErrorMessage.js";

export default {
    name: "MemberSubjectReBackInfo",
	props:{
		selectValue: Object
	},
	emits: ["MemberSubjectData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");
        const loadFlg = ref(false);
		/**
         * @name 定义业务表单
         */
        const getInitFormData = () => {
            return {
                contentTitle: '',
				content: '',
				memberId: '',
				pointMemberId: '',
				subjectId: '',
                id: 0,
			}
        };
        /**
         * @name 表单初始化
         */
        const resetMemberSubjectReBackForm = () => {
            Object.assign(memberSubjectReBackForm, getInitFormData());
        };
		const memberSubjectReBackForm = reactive(getInitFormData());
		const memberSubjectReBackFormRef = ref(null);
        const memberSubjectReBackFormRules = {
            contentTitle: [
                { required: true, message: "请输入话题标题名称", trigger: "blur" },
            ],
        };
        const memberIdOpt = ref([]);
		// =========================================================================================
		// 主业务处理 ========================================================================================= START
        // 提交
        const func_onSubmit = () => {
            // 表单校验
            memberSubjectReBackFormRef.value.validate((valid) => {
                if (valid) {
                    memberSubjectReBackForm['subjectId'] = memberSubjectReBackForm['id'];
                    reBackMemberSubject(memberSubjectReBackForm).then((res) => {
                        if(res.code != 200) {
                            ElMessage.error(res.message);
                        } else {
                            resetMemberSubjectReBackForm();
                            ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);
                            cex.emit('MemberSubjectData', {state: 1, data: []});
                        }
                    });
                } else {
                    return false;
                }
            });
        };
        // 重置
        const func_onReset = () => {
			resetMemberSubjectReBackForm();
        };
		const func_closeDialog = () => {
            cex.emit('MemberSubjectData', {state: 1, data: []});
        };
        // 页面初始化
        const func_onload = (v) => {
			if(loadFlg.value){
				findMemberSubjectInfoById(v).then((res) => {
                    memberSubjectReBackForm['subjectId'] = res.data['id'];
                    memberSubjectReBackForm['id'] = res.data['id'];
                    memberSubjectReBackForm['contentTitle'] = res.data['contentTitle'];
					// Object.keys(memberSubjectReBackForm).forEach((item) => {
                    //     memberSubjectReBackForm[item] = res.data[item];
                    // });
				});
			} else {
				resetMemberSubjectReBackForm();
			};
            let obj = {nickname: ''};
			findMemberList(obj).then((res) => {
				res.data.forEach((item) => {
					memberIdOpt.value.push({label: item['nickname'],value: item['id']});
				});
			});
        };
		// 主业务处理 ========================================================================================= END
        watch(() => props.selectValue, (val) => {
            let id = val['id'];
            loadFlg.value = val['load'];
            memberIdOpt.value = [];
			func_onload(id);
        }, {deep: true,immediate: true});
        return {
			loadFlg, formLabelWidth, memberIdOpt, memberSubjectReBackFormRules, memberSubjectReBackFormRef, memberSubjectReBackForm,
			resetMemberSubjectReBackForm, getInitFormData, func_onload, func_onSubmit, func_onReset, func_closeDialog,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 300px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
</style>